<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="css/swiper-bundle.min.css" />
    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="css/swiper-bundle.min.css" />


</head>

<body>

    <div class="container">
        <div class="row">
            <header class="dpn-slide">
                <div class="dpn-left">
                    <h4>顺职第九组</h4>
                </div>
                <section class="dpn-right">
                    <button>
                        <i class="bi bi-search-heart"></i>
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                            class="bi bi-search-heart" viewBox="0 0 16 16">
                            <path d="M6.5 4.482c1.664-1.673 5.825 1.254 0 5.018-5.825-3.764-1.664-6.69 0-5.018Z" />
                            <path
                                d="M13 6.5a6.471 6.471 0 0 1-1.258 3.844c.04.03.078.062.115.098l3.85 3.85a1 1 0 0 1-1.414 1.415l-3.85-3.85a1.007 1.007 0 0 1-.1-.115h.002A6.5 6.5 0 1 1 13 6.5ZM6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11Z" />
                        </svg>
                    </button>
                    <input type="text" placeholder="search class_">
                    <ul>
                        <li>
                            <a href="login.html">登录</a>
                        </li>
                        <li>
                            <a href="regester.html">注册</a>
                        </li>
                    </ul>
                </section>
            </header>
        </div>
        <div class="row">
            <div class="containers">
                <header class="col-lg-3">
                    <div class="logo">
                        <a href="">
                            <img src="image/logo2.png" alt="" class="d-none d-sm-block">
                        </a>
                    </div>
                    <div class="title">
                        <p>小九课堂</p>
                    </div>
                </header>
                <div class="col-lg-9 ">
                    <ul class="nav nav-tabs">
                        <li class="nav-item">
                            <a class="nav-link d-none d-lg-block" href="index.html">首页</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link d-none d-lg-block" href="#">视频</a>
                        </li>
                        <li class="nav-item dropdown l">
                            <a class="nav-link dropdown-toggle d-none d-lg-block" data-bs-toggle="toggle"
                                href="#">关于我们</a>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item" href="https://gitee.com/hxxyyyyyy/cangku2.git"
                                        target="_blank">黄晓雪</a></li>
                                <li><a class="dropdown-item" href="https://gitee.com/kekkkky/web.html.git"
                                        target="_blank">张珂瑜</a></li>
                                <li><a class="dropdown-item" href="https://gitee.com/lu-meihe/finally.git"
                                        target="_blank">卢美和</a></li>
                                <li><a class="dropdown-item" href="https://gitee.com/jinlanchun/ccc.git"
                                        target="_blank">靳蓝纯</a></li>
                                <li><a class="dropdown-item"
                                        href="https://gitee.com/spicy-bar-gourmet_0/personal-profile-2.git"
                                        target="_blank">彭可欣</a></li>
                                <li><a class="dropdown-item" href="https://gitee.com/priw_wyn/yuening1/tree/master"
                                        target="_blank">吴月宁</a></li>
                            </ul>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link " href="login.html">登录</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link " href="regester.html">注册</a>
                        </li>
                    </ul>

                </div>

            </div>
            <div class="center">
                <ul>
                    <li class="nav-item dropdown l open">
                        <a class="nav-link dropdown-toggle d-none d-lg-block" data-bs-toggle="toggle" href="#"
                            style="color: white;font-size: 25px;">计算机</a>
                        <ul class="dropdown-menu titlemenu">
                            <li><a class="dropdown-item" href="../计算机大类/web前端开发.html">Web前端开发</a></li>
                            <li><a class="dropdown-item" href="../计算机大类/C语言程序设计.html">C语言程序设计</a></li>
                            <li><a class="dropdown-item" href="../计算机大类/python.html">计算机算法与程序设计（python）</a></li>
                            <li><a class="dropdown-item" href="../计算机大类/程序设计基础.html">程序设计基础</a></li>
                        </ul>
                    </li>
                    <li class="nav-item dropdown l">
                        <a class="nav-link dropdown-toggle d-none d-lg-block" data-bs-toggle="toggle" href="#"
                            style="color: white; font-size: 25px;">语言学</a>
                        <ul class="dropdown-menu titlemenu">
                            <li><a class="dropdown-item" href="../教育大类/听说读写.html">听说读写</a></li>
                            <li><a class="dropdown-item" href="../教育大类/跨文化交际.html">跨文化交际</a></li>
                            <li><a class="dropdown-item" href="../教育大类/文学与语言学.html">文学与语言学</a></li>
                            <li><a class="dropdown-item" href="../教育大类/综合语种.html">综合语种</a></li>
                        </ul>
                    </li>
                    <li class="nav-item dropdown l">
                        <a class="nav-link dropdown-toggle d-none d-lg-block" data-bs-toggle="toggle" href="#"
                            style="color: white; font-size: 25px;">艺术学</a>
                        <ul class="dropdown-menu titlemenu">
                            <li><a class="dropdown-item" href="../艺术大类/艺术设计鉴赏.html">艺术设计鉴赏</a></li>
                            <li><a class="dropdown-item" href="../艺术大类/影视艺术欣赏.html">影视艺术欣赏</a></li>
                            <li><a class="dropdown-item" href="../艺术大类/摄影艺术创作.html">摄影艺术创作</a></li>
                            <li><a class="dropdown-item" href="../艺术大类/唐诗艺术.html">唐诗艺术</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="banner col-lg-12">
                <!-- Swiper -->
                <div class="swiper mySwiper">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <a href=""><img src="image/lun1.jpg" alt=""></a>
                        </div>
                        <div class="swiper-slide">
                            <a href=""><img src="image/lun2.jpg" alt=""></a>
                        </div>
                        <div class="swiper-slide">
                            <a href=""><img src="image/lun4.png" alt=""></a>
                        </div>
                    </div>
                </div>

            </div>
            <div class="takeClass">
                <h1>推荐课程</h1>
                <div class="pic">
                    <div class="box1 col-lg-4">
                        <div class="img">
                            <img src="image/计算机.png" alt="">
                        </div>
                        <div class="text">
                            <p>It has been said that the great scientific disciplines are examples of
                                giants standing on the shoulders of other giants.t
                                has also been said that the software industry is an
                                example of midgets standing on the toes of other midgets.</p>
                        </div>
                    </div>
                    <div class="box2  col-lg-4">
                        <div class="img">
                            <img src="image/教育.png" alt="">
                        </div>
                        <div class="text">
                            <p>How much more profitable for the independent mind, after the mere rudiments of education
                                ,
                                to range through a library at random, taking down books as the mother wit suggests!</p>
                        </div>
                    </div>
                    <div class="box3 col-lg-4">
                        <div class="img">
                            <img src="image/艺术.png" alt="">
                        </div>
                        <div class="text">
                            <p>Embrace the beauty and power of art! Art is a universal language that transcends
                                boundaries and speaks to the soul.
                                It is a means of expression, a tool for creativity, and a window to the world's diverse
                                cultures.</p>
                        </div>
                    </div>
                </div>

            </div>
            <div class="computer">
                <div class="ComputerClass">
                    <h1>计算机·Computer</h1>
                    <div class="box">
                        <div class="r1">
                            <div class="imgs">
                                <img src="image/web.png" alt="">
                                <h2>Web前端开发</h2>

                            </div>
                            <div class="name">
                                <button><a href="../计算机大类/web前端开发.html">课程详情</a></button>

                            </div>



                        </div>
                        <div class="r2">
                            <div class="imgs">
                                <img src="image/C.png" alt="">
                                <h2>C语言程序设计</h2>

                            </div>
                            <div class="name">
                                <button><a href="../计算机大类/C语言程序设计.html">课程详情</a></button>

                            </div>
                        </div>
                        <div class="r3">
                            <div class="imgs">
                                <img src="image/python.png" alt="">
                                <h2>计算机算法与程序设计（python）</h2>

                            </div>
                            <div class="name">
                                <button><a href="../计算机大类/python.html">课程详情</a></button>

                            </div>

                        </div>
                        <div class="r4">
                            <div class="imgs">
                                <img src="image/程序设计基础.png" alt="">
                                <h2>程序设计基础</h2>

                            </div>
                            <div class="name">
                                <button><a href="../计算机大类/程序设计基础.html">课程详情</a></button>

                            </div>

                        </div>

                    </div>






                </div>
            </div>
            <div class="education">
                <div class="EducationClass">
                    <h1>教育·language</h1>
                    <div class="box">
                        <div class="r5">
                            <div class="imgs">
                                <img src="image/读写.png" alt="">
                                <h2>听说读写</h2>

                            </div>
                            <div class="name">
                                <button><a href="../教育大类/听说读写.html">课程详情</a></button>

                            </div>
                        </div>
                        <div class="r6">
                            <div class="imgs">
                                <img src="image/文化交际.png" alt="">
                                <h2>跨文化交际</h2>

                            </div>
                            <div class="name">
                                <button><a href="../教育大类/跨文化交际.html">课程详情</a></button>

                            </div>


                        </div>
                        <div class="r7">
                            <div class="imgs">
                                <img src="image/文学.png" alt="">
                                <h2>文学与语言学</h2>

                            </div>
                            <div class="name">
                                <button><a href="../教育大类/文学与语言学.html">课程详情</a></button>

                            </div>


                        </div>
                        <div class="r7">
                            <div class="imgs">
                                <img src="image/语种.png" alt="">
                                <h2>综合语种</h2>

                            </div>
                            <div class="name">
                                <button><a href="../教育大类/综合语种.html">课程详情</a></button>

                            </div>

                        </div>
                    </div>
                </div>

            </div>
            <div class="art">
                <div class="ArtClass">
                    <h1>艺术·Art</h1>
                    <div class="box">
                        <div class="a1">
                            <div class="imgs">
                                <img src="image/艺术设计.png" alt="">
                                <h2>艺术设计鉴赏</h2>

                            </div>
                            <div class="name">
                                <button><a href="../艺术大类/艺术设计鉴赏.html">课程详情</a></button>

                            </div>

                        </div>
                        <div class="a2">
                            <div class="imgs">
                                <img src="image/影视.png" alt="">
                                <h2>影视艺术欣赏</h2>

                            </div>
                            <div class="name">
                                <button><a href="../艺术大类/影视艺术欣赏.html">课程详情</a></button>

                            </div>

                        </div>
                        <div class="a3">
                            <div class="imgs">
                                <img src="image/摄影.png" alt="">
                                <h2>摄影艺术创作</h2>

                            </div>
                            <div class="name">
                                <button><a href="../艺术大类/摄影艺术创作.html">课程详情</a></button>

                            </div>


                        </div>
                        <div class="a4">
                            <div class="imgs">
                                <img src="image/诗歌.png" alt="">
                                <h2>唐诗艺术</h2>

                            </div>
                            <div class="name">
                                <button><a href="../艺术大类/唐诗艺术.html">课程详情</a></button>

                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <footer>
                <div class="row">
                    <div class="col-lg-4 works">
                        <a href="https://gitee.com/hxxyyyyyy/shuzihuachengzhangkongjian" class="w-work" target="_blank">
                            <small class="myfooterrow">
                                我们的代码仓库
                            </small>
                        </a>
                    </div>

                    <div class="col-lg-2 t col-md-4">
                        <h5 class="textColor">常见问题</h5>
                        <ul class="list-unstyled">
                            <li><a href="#" class="Atext">游玩问题</a></li>
                            <li><a href="#" class="Atext">服务态度</a></li>
                            <li><a href="#" class="Atext">详细咨询</a></li>
                        </ul>
                    </div>
                    <div class="col-lg-2 t col-md-4">
                        <h5 class="textColor">联系我们</h5>
                        <ul class="list-unstyled">
                            <li><a href="#" class="Btext">传真：400-6666-888</a></li>
                            <li><a href="#" class="Btext">电话：400-6666-888</a></li>
                            <li><a href="#" class="Btext">邮箱：facai@haoyun.com</a></li>
                        </ul>
                    </div>
                    <div class="col-lg-2 t col-md-4">
                        <h5 class="textColor">关于我们</h5>
                        <ul class="list-unstyled">
                            <li><a href="#" class="Ctext">
                                    地址：佛山市顺德大良街道
                                    顺德职业技术学院
                                </a></li>
                            <li><a href="https://www.sdpt.edu.cn/" class="Ctext">站点简介</a></li>
                            <li><a href="https://map.baidu.com/search/%E9%A1%BA%E5%BE%B7%E8%81%8C%E4%B8%9A%E6%8A%80%E6%9C%AF%E5%AD%A6%E9%99%A2/@12615721.182777353,2592963.3734137,17.04z?querytype=s&da_src=shareurl&wd=%E9%A1%BA%E5%BE%B7%E8%81%8C%E4%B8%9A%E6%8A%80%E6%9C%AF%E5%AD%A6%E9%99%A2&c=138&src=0&wd2=%E4%BD%9B%E5%B1%B1%E5%B8%82%E9%A1%BA%E5%BE%B7%E5%8C%BA&pn=0&sug=1&l=13&b=(12594801,2583874;12642417,2607874)&from=webmap&biz_forward=%7B%22scaler%22:2,%22styles%22:%22pl%22%7D&sug_forward=0a15c7ecf464c9ffed74f853&device_ratio=2"
                                    class="Ctext">站点地图</a></li>
                        </ul>
                    </div>
                    <p class="copy">&copy;顺职第9组</p>

                </div>

            </footer>





        </div>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    <!-- Swiper JS -->
    <script src="js/swiper-bundle.min.js"></script>

    <!-- Initialize Swiper -->
    <script>
        var swiper = new Swiper(".mySwiper", {
            spaceBetween: 30,
            centeredSlides: true,
            autoplay: {
                delay: 2500,
                disableOnInteraction: false,
            },
            pagination: {
                el: ".swiper-pagination",
                clickable: true,
            },
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
            keyboard: {
                enabled: true,
                onlyInViewport: true,
            },

        });




        document.querySelector('.dpn-slide .dpn-right input').addEventListener('focus', function () {
            this.style.width = 300 + 'px'
            this.style.boxShadow = '0 0 15px #32fef4bf'
        })
        document.querySelector('.dpn-slide .dpn-right input').addEventListener('blur', function () {
            this.style.width = 200 + 'px'
            this.style.boxShadow = '0 0 0 0'
        })
        const center = document.querySelector('.center')
        const nav = document.querySelector('.container .row .dpn-slide')
        window.addEventListener('scroll', function () {
            if (document.documentElement.scrollTop >= center.offsetTop) {
                nav.style.transform = 'translateY(0)'
            } else {
                nav.style.transform = 'translateY(-140px)'
            }
        })
    </script>

</body>

</html>